<!DOCTYPE html>
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<title>图表带查询</title>
<%@include file="/resource/component_BI.jsp"%>
</head>
<body>
	<ul class="search-bi">
		<li class="c">
			<span class="t">时间：</span>
			<input name="datepicker" class="nui-datepicker" />
			<i class="spacer">-</i>
			<input name="datepicker" class="nui-datepicker" />
		</li>

		<li class="c">
			<span class="t">类型：</span>
			
			<div id="type" url="zscq.BI.cmptBI.bizGetZlLXData.biz.ext" class="nui-checkboxlist" valueField="id" textField="text"></div>
		</li>
		<li class="c">
			<span class="t">部门：</span>
			<div id="department" url="data/data_department.txt" class="nui-checkboxlist" valueField="id" textField="text"></div>
		</li>
		<li class="b">
		    <a class="nui-button" iconCls="icon-search">查询</a>
		    <a class="nui-button" iconCls="icon-reload">重置</a>
		</li>
	</ul>
	<div class="grid-chart">
		<div class="panel panel-grid">
	    	<div class="panel-title"><i class="title">统计表</i></div>
	    	<div class="panel-cont">
		        <div id="datagrid" class="nui-datagrid" style="width:100%;height:100%;" allowAlternating="true"
	            	url="data/data_grid_zl.txt" showPager="false" allowMoveColumn="false" allowResizeColumn="false">
		            <div property="columns">
		                <div field="c0" width="100" headerAlign="center" align="center">部门</div>
		                <div field="c1" width="80" headerAlign="center" align="center" renderer="gridRenderer">专利数</div>
		                <div field="c2" width="80" headerAlign="center" align="center" renderer="gridRenderer">成果数</div>
		                <div field="c3" width="80" headerAlign="center" align="center" renderer="gridRenderer">商标数</div>
		                <div field="total" width="80" headerAlign="center" align="center" renderer="gridRenderer">总数</div>
		            </div>
		        </div>
	    	</div>
		</div>
		<div class="panel panel-chart">
	    	<div class="panel-title"><i class="title">图形分析</i></div>
	    	<div class="panel-cont">
	    		<div class="chart-wrap"><div class="chartDiv" id="chartObj"></div></div>
	    	</div>
		</div>
	</div>
<script type="text/javascript">
nui.parse();

var datagrid = nui.get('datagrid');

// 页面加载完成后执行
$(function(){
	datagrid.load({}, function(){
		mini.get("type").setData([
			{"id":222,"text":222},
			{"id":222,"text":222}
		]);
		var data = datagrid.getData();
		loadChartData(data);
	});
});

// 加载图形数据
var loadChartData = function(data){
	var legendData = ['专利数','成果数','商标数'];
	var xAxisData = [],
		serieData = [[],[],[]];
	$.each(data, function(i, d){
		xAxisData.push(d.c0);
		serieData[0].push(d.c1);
		serieData[1].push(d.c2);
		serieData[2].push(d.c3);
	});
	// 项目完成情况
	echartByCustom('chartObj',{
		legendData: legendData,
		yAxis: [{ name:'数量' }],
		xAxisData: xAxisData,
		grid: { left: 50, right: 50, bottom: 30 },
		series: [
			{ name: legendData[0], type: 'bar', stack: '总量', barMaxWidth:20, data: serieData[0] },
			{ name: legendData[1], type: 'bar', stack: '总量', barMaxWidth:20, data: serieData[1] },
			{ name: legendData[2], type: 'bar', stack: '总量', barMaxWidth:20, data: serieData[2] }
	    ],
	    eventClick: function(param){
	    	var name = param.name,
	    		seriesName = param.seriesName;
	    	// 弹出窗口
	    	openWinList(name, seriesName);
	    }
	});
}

// gridRenderer
var gridRenderer = function(e){
	var name = e.record.c0;// 项目名称
	var type = e.column.header;// 列名
	return '<a href="javascript:void(0);" class="link" onclick="openWinList(\''+ name +'\', \''+ type +'\')">'+ e.value +'</a>';
}

// 打开列表页面
var openWinList = function(name, type){
	
	var url = 'page/pageGrid.jsp?name='+ name +'&type=lc';
	// 弹出窗口
	openWindow(url);
}
</script>
</body>
</html>